<script setup lang="ts">
  import { reactive } from 'vue';
  import {getOpenAccess} from './serve'
  defineOptions({
    name: 'home'
  })

  let state = reactive({
    firstname: '',
    lastname: '',
    email: '',
    nationality: '',
    phone: '',
    countryCode:'+86',
    loading:false
  })


  const openAccount = () => {
    
    if(!state.firstname){
      return ElMessage.error('Please enter your first name')
    }
    if(!state.lastname){
      return ElMessage.error('Please enter your last name')
    }
    if(!state.email){
      return ElMessage.error('Please enter your email')
    }
    if(!state.nationality){
      return ElMessage.error('Please enter your nationality')
    }
    if(!state.phone){
      return ElMessage.error('Please enter your phone')
    }
    let params = {
      lastName:state.firstname,
      name:state.lastname,
      phone:state.phone,
      mailbox:state.email,
      nationality:state.nationality,
    }
    state.loading = true;
    getOpenAccess(params).then(()=>{
      state.loading = false;
      state.firstname = '';
      state.lastname = '';
      state.email = '';
      state.nationality = '';
      state.phone = '';
      ElMessage({
        message: 'Open An Account Successfully',
        type: 'success',
      })
    }).catch(err=>{
      state.loading = false;
      ElMessage({
        message: err.message?err.message:'Open An Account Failed',
        type: 'error', 
      })
      console.log(err)
    })
  }
</script>

<template>
  <div class="logincontainer">
    <img src="./images/1.png" alt="">
    <div class="loginformbox">
      <h3>Open An Account</h3>
      <div class="formbox">
        <div>
          <div>
            <label for="firstname">First Name *</label>
            <div>
              <input type="text" id="firstname" v-model.trim="state.firstname" placeholder="First Name">
            </div>
          </div>
          <div>
            <label for="lastname">Last Name *</label>
            <div>
              <input type="text" id="lastname" v-model.trim="state.lastname" placeholder="Last Name">
            </div>
          </div>
        </div>
        <div>
          <div>
            <label for="email">Email *</label>
            <div>
              <input type="text" id="email" v-model.trim="state.email" placeholder="Email">
            </div>
          </div>
          <div>
            <label for="nationality">Nationality *</label>
            <div>
              <input type="text" id="nationality" v-model.trim="state.nationality" placeholder="Nationality">
            </div>
          </div>
        </div>
        <div>
          <div>
            <label for="phone">Phone *</label>
            <div class="phonebox">
              <!-- <vue3-country-intl v-model="state.countryCode" :showLabelImg="false" :onlyValue="true" :showAreaCode="false"></vue3-country-intl> -->
              <input type="text" id="phone" v-model.trim="state.phone" placeholder="Phone">
            </div>
          </div>
        </div>
        <!-- <button @click="openAccount">Open an account now</button> -->
        <el-button type="primary" @click="openAccount" :loading="state.loading">Open An Account Now</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @use './index';
</style>
